<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑资料</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none
        }

        html,
        body {
            height: 100%;
        }

        .menu-wrap {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 55px;
            background-color: #f5f5f5;
            box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
            overflow: hidden;
        }

        .menu-wrap:hover {
            width: 250px;
        }

        .menu {
            position: absolute;
            left: 0;
            top: 80px;
            bottom: 80px;
            width: 250px;
            overflow-y: auto;
            margin-top: 80px;
        }

        .menu li {
            height: 42px;
            line-height: 42px;

        }

        .menu li:hover {
            background-color: rgb(160, 190, 117);
        }

        .menu li:hover a {
            color: #fff;
        }

        .meun a {
            display: block;
            columns: #8a8a8a;
            border-top: 1px solid #e9e9e9;
        }

        .menu i {
            display: inline-block;
            width: 55px;
            text-align: center;
            font-size: 18px;
        }

        .menu span {
            font-size: 14px;
        }


        /* 侧边头像 */
        #headPic {
            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
            border-radius: 75px;
            margin-left: 80px;
            /* margin:20px auto; */
            position: relative;
            overflow: hidden;
            top: 50px;
        }

        #headPicimg {
            width: 80px;
            height: 80px;
        }

        #headPic:hover #mask {
            display: block;
        }
        #mask {
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        #innerImg {
            position: absolute;
            left: 25%;
            top: 25%;
            transform: translate(-50%, -50%);
            /*适用于不清楚自己的尺寸情况*/
        }

        #main {
            width: 80%;
            margin: auto;
            min-width: 1200px;
            position: absolute;
            left: 250px;
        }

        #user {
            width: 60%;
            margin: 10px auto;
            border: 1px solid #ccc;
            background-color: #ddd;
        }

        #user form {
            text-align: center;
            width: 80%;
            margin: 10px auto;
            border: 1px solid #ccc;
            background-color: #fff;
        }
        #user form h3{
            background: linear-gradient(45deg, rgb(160, 191, 124), rgb(255, 255, 255)) fixed;
            height: 50px;
            line-height: 50px;
        }

        #user label {
            width: 100px;
            margin: 0 auto;
        }

        #user input {
            width: 150px;
            height: 30px;
            margin-top: 10px;
        }

        #user #btnLogin {
            color: #fff;
            background: linear-gradient(rgb(114, 126, 101), rgb(101, 147, 74));
            width: 100px;
            height: 25px;
            margin:20px auto;
            border: 1px solid rgb(160, 190, 117);
        }
    </style>
    <script>
        window.onload = function () {
            document.querySelector('#headPic').onclick = function () {
                document.querySelector('#headPic input').click()     //模拟表单元素被单击
            }
        }
        function changeHeadPic() {
            //1.获取图片文件
            var fileHead = document.querySelector('#headPic input').files[0]
            //2.文件读取图片
            var fread = new FileReader()
            fread.onload = function (e) {
                //3.把图片显示在页面中
                document.querySelector('#headPic>img').src = e.target.result
            }
            fread.readAsDataURL(fileHead)
        }
    </script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
</head>

<body>
    <div id="main">
        <nav class="menu-wrap">
            <div id="headPic">
                <img id="headPicimg" src="images/icon_shangjie.gif" alt="">
                <div id="mask">
                    <img id="innerImg"
                        src=""
                        alt="">
                </div>
                <form action="#">
                    <input type="file" name="" id="" accept="image/jpg" onchange="changeHeadPic()" style="display:none">
                </form>
            </div>
            <div class="menu">
                <ul>

                    <li>
                        <a href="shouye.html">
                            <i class="fa fa-home fa-lg"></i>
                            <span class="nav-text">首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="edit.html">
                            <i class="fa fa-bullhorn fa-lg"></i>
                            <span class="nav-text">编辑资料</span>
                        </a>
                    </li>
                    <li>
                        <a href="sharemenu.html">
                            <i class="fa fa-user fa-lg"></i>
                            <span class="nav-text">上传菜谱</span>
                        </a>
                    </li>
                    <li>
                        <a href="personal.html">
                            <i class="fa fa-envelope-o fa-lg"></i>
                            <span class="nav-text">已发布的内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="shoucang.html">
                            <i class="fa fa-heart-o fa-lg"></i>
                            <span class="nav-text">收藏</span>
                        </a>
                    </li>
                    <li>
                        <a href="integral.html">
                            <i class="fa fa-shopping-bag fa-lg"></i>
                            <span class="nav-text">积分兑换</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="user">
            <form action="#">
                <h3>编辑资料</h3>
                <label for="">修改用户名：</label>
                <input type="text" id="txtName" placeholder="请输入新用户名" required><br>
                <label for="">原密码：</label>
                <input type="text" id="txtPassword" placeholder="请输入原密码" required><br>
                <label for="">新密码：</label>
                <input type="text" id="reset" placeholder="请输入新密码" required><br>
                <label for="">重复密码：</label>
                <input type="text" id="txtqueren" placeholder="请确认密码" required><br>
                <input type="button" id="btnLogin" value="确认修改" onclick="login()">
            </form>
        </div>
    </div>
    </div>
    <!-- Code injected by live-server -->
    <script type="text/javascript">
        // <![CDATA[  <-- For SVG support
        if ('WebSocket' in window) {
            (function () {
                function refreshCSS() {
                    var sheets = [].slice.call(document.getElementsByTagName("link"));
                    var head = document.getElementsByTagName("head")[0];
                    for (var i = 0; i < sheets.length; ++i) {
                        var elem = sheets[i];
                        var parent = elem.parentElement || head;
                        parent.removeChild(elem);
                        var rel = elem.rel;
                        if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                            var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                            elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                        }
                        parent.appendChild(elem);
                    }
                }
                var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
                var address = protocol + window.location.host + window.location.pathname + '/ws';
                var socket = new WebSocket(address);
                socket.onmessage = function (msg) {
                    if (msg.data == 'reload') window.location.reload();
                    else if (msg.data == 'refreshcss') refreshCSS();
                };
                if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                    console.log('Live reload enabled.');
                    sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
                }
            })();
        }
        else {
            console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
        }
        // ]]>
        function login() {
            var userPassword = document.querySelector("#txtPassword").value;
            var usereset = document.querySelector("#reset").value;
            var userqueren = document.querySelector("#txtqueren").value;
            var users = JSON.parse(localStorage.getItem("users"));
            for (var i = 0; i < users.length; i++) {
                if (usereset == userqueren) {
                    alert("密码修改成功！");
                } else {
                    alert("输入的密码不一致！");
                }
                localStorage.getItem('loginName');
                console.log(loginName)
                alert("修改成功！");
                location.href = "shouye.html"
                return
            }
        }
    </script>
</body>

</html>